<template>
  <div class="container">
    <!-- 页面标题和搜索 -->
    <div class="page-header">
      <h1 class="page-title">问答社区</h1>
      <div class="search-box">
        <input type="text" placeholder="搜索问题..." class="search-input">
        <button class="btn btn-primary">搜索</button>
      </div>
    </div>

    <div class="qa-layout">
      <!-- 左侧问题列表 -->
      <div class="questions-section">
        <!-- 筛选器 -->
        <div class="filter-section card">
          <div class="filter-group">
            <h3 class="filter-title">分类</h3>
            <div class="filter-tags">
              <span v-for="category in categories" :key="category" class="tag" :class="{ active: selectedCategory === category }"
                @click="selectedCategory = category">
                {{ category }}
              </span>
            </div>
          </div>
          <div class="filter-group">
            <h3 class="filter-title">排序</h3>
            <div class="filter-tags">
              <span v-for="sort in sortOptions" :key="sort.value" class="tag" :class="{ active: selectedSort === sort.value }"
                @click="selectedSort = sort.value">
                {{ sort.label }}
              </span>
            </div>
          </div>
        </div>

        <!-- 问题列表 -->
        <div class="questions-list">
          <div v-for="question in filteredQuestions" :key="question.id" class="question-card card">
            <div class="question-header">
              <h2 class="question-title">{{ question.title }}</h2>
              <div class="question-meta">
                <span class="author">@{{ question.author }}</span>
                <span class="date">{{ question.date }}</span>
                <span class="views">👁️ {{ question.views }}</span>
              </div>
            </div>
            <p class="question-desc">{{ question.description }}</p>
            <div class="question-footer">
              <div class="question-tags">
                <span v-for="tag in question.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
              <div class="question-stats">
                <span class="answers">回答: {{ question.answers }}</span>
                <span class="votes">投票: {{ question.votes }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <button class="btn btn-secondary" :disabled="currentPage === 1" @click="currentPage--">上一页</button>
          <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <button class="btn btn-secondary" :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 提问按钮 -->
        <button class="btn btn-primary ask-btn">我要提问</button>

        <!-- 热门问题 -->
        <div class="sidebar-card card">
          <h3 class="sidebar-title">热门问题</h3>
          <div class="hot-questions">
            <div v-for="question in hotQuestions" :key="question.id" class="hot-question">
              <h4 class="hot-question-title">{{ question.title }}</h4>
              <div class="hot-question-meta">
                <span class="answers">回答: {{ question.answers }}</span>
                <span class="views">👁️ {{ question.views }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 标签云 -->
        <div class="sidebar-card card">
          <h3 class="sidebar-title">热门标签</h3>
          <div class="tag-cloud">
            <span v-for="tag in tags" :key="tag" class="tag" :class="{ active: selectedTags.includes(tag) }"
              @click="toggleTag(tag)">
              {{ tag }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const selectedCategory = ref('')
const selectedTags = ref([])
const selectedSort = ref('latest')
const currentPage = ref(1)
const totalPages = ref(5)

const categories = ['全部', '前端开发', '后端开发', '移动开发', '人工智能', '数据库', 'DevOps']
const tags = ['Vue', 'React', 'Node.js', 'TypeScript', 'Go', 'Python', 'Docker', 'Kubernetes', '微服务', 'Web3']
const sortOptions = [
  { label: '最新提问', value: 'latest' },
  { label: '最多回答', value: 'answers' },
  { label: '最多投票', value: 'votes' }
]

const questions = [
  {
    id: 1,
    title: 'Vue3中如何优雅地处理异步数据？',
    description: '在Vue3项目中，我遇到了异步数据加载的问题。请问有什么最佳实践可以推荐吗？',
    category: '前端开发',
    tags: ['Vue', 'TypeScript', '前端'],
    author: 'jakechen',
    date: '2025-04-20',
    views: 1234,
    answers: 15,
    votes: 32
  },
  {
    id: 2,
    title: 'Go语言微服务架构中的服务发现如何实现？',
    description: '正在使用Go语言开发微服务，想了解服务发现的最佳实现方案。',
    category: '后端开发',
    tags: ['Go', '微服务', 'gRPC'],
    author: 'denglee',
    date: '2025-04-18',
    views: 856,
    answers: 8,
    votes: 18
  },
  {
    id: 3,
    title: 'React性能优化有哪些实用技巧？',
    description: 'React应用在数据量大的情况下出现性能问题，求优化建议。',
    category: '前端开发',
    tags: ['React', '性能优化', '前端'],
    author: 'linzh',
    date: '2025-04-15',
    views: 2345,
    answers: 12,
    votes: 45
  }
]

const hotQuestions = computed(() => {
  return [...questions].sort((a, b) => b.views - a.views).slice(0, 5)
})

const filteredQuestions = computed(() => {
  return questions.filter(question => {
    const categoryMatch = !selectedCategory.value || selectedCategory.value === '全部' || question.category === selectedCategory.value
    const tagsMatch = selectedTags.value.length === 0 || question.tags.some(tag => selectedTags.value.includes(tag))
    return categoryMatch && tagsMatch
  }).sort((a, b) => {
    if (selectedSort.value === 'latest') return new Date(b.date) - new Date(a.date)
    if (selectedSort.value === 'answers') return b.answers - a.answers
    return b.votes - a.votes
  })
})

const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index === -1) {
    selectedTags.value.push(tag)
  } else {
    selectedTags.value.splice(index, 1)
  }
}
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.qa-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.questions-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.question-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-title {
  font-size: 20px;
  font-weight: bold;
}

.question-meta {
  display: flex;
  gap: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.question-desc {
  color: var(--text-secondary);
  line-height: 1.6;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-tags {
  display: flex;
  gap: 8px;
}

.question-stats {
  display: flex;
  gap: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ask-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.hot-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hot-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hot-question-title {
  font-size: 14px;
  font-weight: 500;
}

.hot-question-meta {
  display: flex;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.page-info {
  color: var(--text-secondary);
}

.tag.active {
  background-color: var(--primary-color);
  color: white;
}

@media (max-width: 1024px) {
  .qa-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .search-box {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .question-footer {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .question-tags {
    width: 100%;
    flex-wrap: wrap;
  }

  .question-stats {
    width: 100%;
    justify-content: flex-start;
  }
}
</style> 